<!-- 取货详情 -->
<template>
	<ListLayout>
		<Tips :leftText="'派单时间:'+SendRepairInfo.createTime || '-'" :rightText="stateParams.text" :color="stateParams.color[stateParams.state]"> </Tips>
		<!-- 取件信息 -->
		<PickUpDetailCard :pickUpInfo="PickUpInfo"></PickUpDetailCard>
		<!-- 设备信息 -->
		<DeviceCard :sendRepairInfo="SendRepairInfo"></DeviceCard>
		<!-- 故障信息 -->
		<FaultDetailInfoCard :sendRepairInfo="SendRepairInfo"> </FaultDetailInfoCard>

		<template #footer>
			<view class="footer">
				<HButton @click="onPickup">
					设备取走
				</HButton>
			</view>
		</template>
	</ListLayout>
</template>

<script>
	import ListLayout from '@/components/layout/listLayout.vue'
	import PickUpDetailCard from '@/components/card/sendRepair/factory/info/pickUpDetail.vue'
	import FaultDetailInfoCard from '@/components/card/sendRepair/factory/info/fault.vue'
	import DeviceCard from '@/components/card/sendRepair/factory/info/device.vue'
	import HButton from '@/components/button/index.vue'
	import Tips from '@/components/tips/orderTips.vue'
	import ReapirApi from '@/apis/repair.js'
	import { factoryState } from '@/sendRepair/factory/state.js'
	import SendRepairRouterConfig from '@/sendRepair/routerConfig.js'
	export default {
		components: {
			Tips,
			ListLayout,
			PickUpDetailCard,

			FaultDetailInfoCard,
			DeviceCard,
			HButton
		},
		data() {
			return {
				data: {},
				stateParams: {
					color: factoryState.colors,
					text: '',
					state: ''
				},
				routerParams: {
					id: ''
				}
			}
		},

		computed: {
			PickUpInfo() {
				let { pickInfo } = this.data
				return pickInfo || {}
			},
			SendRepairInfo() {
				let { repairInfo } = this.data
				return repairInfo || {}
			},

		},
		methods: {
			onPickup() {
				wx.navigateTo({
					url: `${SendRepairRouterConfig.Factory.PickUpConfirm}?id=${this.routerParams.id}`
				})
			}
		},
		async onLoad(query) {
			const {
				state,
				currStateToName,
				id
			} = query
			this.$set(this.stateParams, 'text', currStateToName)
			this.$set(this.stateParams, 'state', state)
			this.$set(this.routerParams, 'id', id)

			console.log(query, 'onLoad---query')
			let res = await ReapirApi.common.getDetail(id)
			if (res.code === 0) {
				this.data = res.body || {}

			}

		}

	}
</script>

<style lang="scss" scoped>
	.footer {
		padding: 18rpx 30rpx
	}
</style>
